<template>
	<view>
		<image src="../../static/img/jfmx.png" class="jf_bg w100"></image>
		<view class="relative" style="margin-top: -480rpx;">
			<view class="flex align-center justify-between padding-x-30">
				<image @click="goBack()" src="../../static/img/back_f.png" style="width: 32rpx;height: 32rpx;"></image>
				<view class="fs-32 color-fff">营收资金统计</view>
				<view></view>
				<!-- <view @click="showMutibleDate = true" style="background: rgba(255,255,255,0.2);" class="padding-x-24 flex1 flex align-center justify-between margin-left-30 radius60">
					<input v-model="date" disabled type="text" class="fs-24 color-fff flex1" style="height: 60rpx;" placeholder="可进行天/月/季度/年度查询">
					<image src="../../static/img/date.png" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
			</view>
			<view class="margin-top-80 flex align-center justify-between">
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.pay_amount}}</view>
					<view class="fs-28 margin-top-16">营收应收款</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.service}}</view>
					<view class="fs-28 margin-top-16">平台佣金</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.jiohuo}}</view>
					<view class="fs-28 margin-top-16">激活消费应付</view>
				</view>
			</view>

			<view style="margin-top: 180rpx;" class="padding-x-24" >
				<view @click="jump('/pages/my/tongji')" class="flex align-center justify-between padding-y-30">
					<view class="fw-600 flex align-center"><view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text class="fs-30 color-333 margin-left-16">营收资金统计</text></view>
					<image src="../../static/img/next2.png" style="width: 10rpx;height: 20rpx;"></image>
				</view>
				
				<view @click="jump('/pages/my/yingshou')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">营业额</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text> {{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.amount}}</view>
				</view>
				<view  @click="jump('/pages/my/shoukuan')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">商家实收款</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text>{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.pay_amount}}</view>
				</view>
				<!-- <view class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">其他收款</view>
						<view class="fs-24 color-999">{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.amount}}</view>
				</view> -->
				<view @click="jump('/pages/my/dikou')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">积分抵扣</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text>{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.points_amount}}</view>
				</view>
				<view  @click="jump('/pages/my/yongjin')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">平台佣金</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text>{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.service}}</view>
				</view>
				<view  @click="jump('/pages/my/xiaofeijiti')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">激活消费计提</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text>{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.jiohuo}}</view>
				</view>
				<view  @click="jump('/pages/my/huakuan')" class="padding-y-24 solid-bottom flex align-center justify-between">
					<view>
						<view class="fs-28 color-333">平台划款已收</view>
						<view class="fs-24 color-999"><text v-if="info.start_time">{{info.start_time}} -- </text>{{info.end_time}}</view>
					</view>
					<view class="fs-32 color-zhuse">{{info.cash}}</view>
				</view>
				
			</view>
		</view>
		
		<view class="padding-x-60 margin-y-60 padding-bottom-30">
			<view @click="jump('/pages/my/tixian?type=deposit')" class="callBtn color-fff radius60 h40 fs-28 text-center">划款申请</view>
		</view>
		
		<view class="fs-22 color-999 margin-top-40 flex padding-x-30">
			<view class="color-333" style="width: 100rpx;">附注：</view>
			<view v-html="txt" style="width: 96%;"></view>
		</view>
		
		<date-range mode="date" :showMutibleDate="showMutibleDate" :startDate="startDate" :endDate="endDate"
			 @onSelected="dateSelected"></date-range>
		
	</view>
</template>

<script>
	import dateRange from 'components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				startDate: '2021-12-01',
				endDate: '2022-12-30',
				q: {
					start_time: "",
					end_time: "",
					page: 1
				},
				total: 0,
				hasMore: true,
				loadStatus: '',
				list: [],
				info:{},
				date:'',
				showMutibleDate: false,
				txt:''
			}
		},
		onShow() {
			this.txt = JSON.parse(uni.getStorageSync('conf')).note_revenue
			this.getList()
		},
		methods: {
			getList() {
				this.$api.statistics(this.q).then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			
			dateSelected: function(e) {
				console.log(e)
				if (e) {
					this.q.start_time = e.start
					this.q.end_time = e.end
					this.date = e.start +'至' + e.end
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jf_bg{height: 560rpx;}
	.uni-input-placeholder{color: #fff;}
	.color1FC830{color: #1FC830;}
	.color239AFF{color: #239AFF;}
	.w40{width: 40%;}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
